<ui:composition template="/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:cc="http://sourceforge.net/projects/jsf-comp">

    <ui:define name="styleone">
    </ui:define>

    <ui:define name="colunaEsquerda">
        <span style="color:#FFF">.</span>
    </ui:define>

    <ui:define name="conteudo">
        <br/>
        <center>
            <rich:messages layout="table"
                           errorClass="errorClass"
                           infoClass="infoClass"
                           warnClass="warnClass"
                           styleClass="painelMensagem"
                           ajaxRendered="true"/>
        </center>
        <br/>
        <h:form id="apartamento">
            <rich:tabPanel id="tabPrincipal" switchType="server">

                <!-- Tab com as informações principais -->
                <rich:tab label="#{bundle.apartamentoDadosPrincipais}">
                    <a4j:loadScript  type="text/javascript" src="/resources/scripts/jquery.maskedinput-1.1.4.js" />

                    <h:panelGrid cellspacing="2" cellpading="2" columns="2" columnClasses="field-names, fields">
                        <h:outputLabel for="opNumeroApartamento">
                            <h:outputText value="#{bundle.apartamentoNumero}: " />
                        </h:outputLabel>

                        <h:panelGroup>
                            <h:inputText id="itNumeroApartamento" value="#{apartamentoAction.apartamento.numApart}" label="#{bundle.apartamentoNumero}" size="15" required="true" />
                            <h:outputText value=" campo obrigatorio" />
                        </h:panelGroup>

                        <h:outputLabel for="opIdentidade">
                            <h:outputText value="#{bundle.apartamentoDescricao}: " />
                        </h:outputLabel>

                        <h:inputTextarea id="itDescricao" style="width: 100%; height:100px" value="#{apartamentoAction.apartamento.descricaoApart}"/>


                        <h:outputLabel for="opNumeroQuartos">
                            <h:outputText value="#{bundle.apartamentoNumeroQuarto}" />
                        </h:outputLabel>

                        <h:inputText id="itNumeroQuartos" value="#{apartamentoAction.apartamento.numQuartosApart}" label="#{bundle.apartamentoNumeroQuarto}" size="15"/>

                        <h:outputLabel for="opDescricaoTipo">
                            <h:outputText value="#{bundle.apartamentoTipo} :" />
                        </h:outputLabel>

                        <h:selectOneMenu id="somTipos" value="#{apartamentoAction.tipoApartamentoSelecionado}" label="#{bundle.apartamentoTipo}" >
                            <s:selectItems value="#{apartamentoAction.tiposApartamentos}" var="tp" label="#{tp.descricao}" itemValue="#{tp.idtipo}" noSelectionLabel="..." />
                        </h:selectOneMenu>
                        
                    </h:panelGrid>
                </rich:tab>
            </rich:tabPanel>
            <br/>
            <h:commandLink action="#{apartamentoAction.criar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           reRender="dtApartamento"
                           rendered="#{apartamentoAction.operacaoAtual == 'CRIACAO'}">
                <h:graphicImage value="/resources/images/dialog-ok.png"/>
                <h:outputText value="#{messages.botaoOk}" />
            </h:commandLink>

            <h:commandLink action="#{apartamentoAction.alterar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           reRender="dtApartamento"
                           rendered="#{apartamentoAction.operacaoAtual == 'ALTERACAO'}">
                <h:graphicImage value="/resources/images/dialog-ok.png"/>
                <h:outputText value="#{messages.botaoOk}" />
            </h:commandLink>

            <h:commandLink action="#{apartamentoAction.cancelar}"
                           styleClass="link dr-toolbar-ext rich-toolbar"
                           immediate="true">
                <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                <h:outputText value="#{messages.botaoCancelar}" />
            </h:commandLink>
            <br/><br/>
        </h:form>
    </ui:define>

    <ui:define name="colunaDireita">
        <span style="color:#FFF">.</span>
    </ui:define>
</ui:composition>